<template>
  <el-select filterable v-model="internalSelectedValue" placeholder="请选择" @change="handleSelectChange">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
</template>

<script>
export default {
  props: {
    value: {
      required: true
    },
    fetchOptions: {
      type: Function,
      required: true
    }
  },
  data() {
    return {
      options: [],
      internalSelectedValue: this.value // 使用内部的 data 属性来代替直接修改 prop
    };
  },
  watch: {
    value(newVal) {
      // 当父组件更新 prop 时，同步更新内部的 data 属性
      this.internalSelectedValue = newVal;
    },
    internalSelectedValue(newVal) {
      // 当内部选中的值变化时，通知父组件更新
      this.$emit('input', newVal);
    }
  },
  created() {
    this.fetchOptionsData();
  },
  methods: {
    async fetchOptionsData() {
      try {
        const response = await this.fetchOptions();
        this.options = response.data;
      } catch (error) {
        console.error('Error fetching options:', error);
      }
    },
    handleSelectChange(value) {
      // 选中值变化时，触发更新
      this.$emit('input', value);
    }
  }
};
</script>




